<template>
	<!-- 登录 -->
	<div>
		<van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
		<div class="nav">
			<van-cell-group>
				<van-field v-model="username" class="iconfont icon-shouji phone" center placeholder="+86  请输入手机号" />
				<div class="yzm">
					<van-field v-model="sms" center clearable placeholder="验证码" class="sms">
					</van-field>
					<van-button slot="button" size="small" type="primary" class="button">获取验证码</van-button>
				</div>
				<van-field v-model="password" type="password" class="iconfont icon-mima phone" center placeholder="请输入密码" /><span
				 class="iconfont icon-biyan"></span>
				<van-field v-model="qrpassword" type="password" class="iconfont icon-mima phone" center placeholder="请确认密码" /><span
				 class="iconfont icon-biyan"></span>
				<van-field v-model="yqma" class="iconfont icon-yaoqing phone" center placeholder="请输入邀请码(选填)" /><span class="iconfont icon-_huaban"></span>
				<van-button round type="info" @click="reg" class="login">立即注册</van-button>
			</van-cell-group>
		</div>
	</div>

	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	export default {
		name: 'login',
		data() {
			return {
				username: '',
				password: '',
				sms: '',
				yqma: '',
				qrpassword: ''
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			reg() {
				this.$store.commit('login', this.username)
				this.$store.commit('reg', this.password)
				console.log(this.$store.state.usernames)
				console.log(this.$store.state.passwords)
				if (this.$store.state.usernames == '') {
					this.$toast('手机号不能为空')
				} else if (/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/.test(this.$store.state.usernames) != true) {
					this.$toast('手机号格式不正确')
				} else if (this.$store.state.passwords == '') {
					this.$toast('密码不能为空')
				} else if (this.qrpassword != this.$store.state.passwords) {
					this.$toast('密码输入不一致')
				} else {
					api.getReg({
						userName: this.$store.state.usernames,
						password: this.$store.state.passwords,
						nickName: this.$store.state.usernames,
						avatar: ''
					}).then((data) => {
						console.log(data)
						if (data.data.code == 'success') {
							this.$toast('注册成功')
							this.$router.push("/login")
						} else {
							console.log(data.data.message);
							// this.$router.push("/register")
							this.$toast('用户名已存在')
							location.reload()
						}
					})
				}
			}
		},
	}
</script>

<style scoped="">
	body {
		display: flex;
		flex-direction: column;
	}

	.van-nav-bar__title {
		color: #fff;
		font-size: 14px;
	}

	.van-nav-bar {
		height: 46px;
		background: #d46170;
	}

	.van-field__control::placeholder {
		color: #c5c9ca;
	}

	.van-icon,
	.van-icon::before {
		color: #FFF;
		font-size: 20px;
	}

	.icon-biyan:first-of-type {
		position: absolute;
		top: 110px;
		right: 30px;
		color: #8d9194;
	}

	.icon-biyan:nth-of-type(2) {
		position: absolute;
		top: 160px;
		right: 30px;
		color: #8d9194;
	}

	.icon-_huaban {
		position: absolute;
		top: 205px;
		right: 25px;
	}

	.icon-_huaban:before {
		font-size: 25px;
	}

	.van-nav-bar__text {
		color: #fff;
		font-size: #12px;
	}

	.nav {
		margin-top: 44px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.icon-shouji:before,
	.icon-mima:before,
	.icon-yaoqing:before {
		font-size: 20px;
		color: #b85261;
		margin-right: 13px;
	}

	.nav .phone,
	.nav .sms {
		background: #eff3f4;
		font-size: 12px;
	}

	.nav .phone {
		width: 276px;
		height: 36px;
		margin: 0 auto;
		margin-bottom: 14px;
		border-radius: 18px;
	}

	.nav .yzm {
		width: 276px;
		height: 36px;
		margin: 0 auto;
		margin-bottom: 14px;
		display: flex;
		justify-content: space-between;
	}

	.nav .button {
		height: 36px;
		width: 84px;
		border-radius: 18px;
		background: #fcabb2;
		border: 0;
	}

	.nav .sms {
		width: 184px;
		height: 36px;
		border-radius: 18px;
	}

	.nav .login {
		width: 276px;
		height: 36px;
		background: #d46170;
		border: 0;
		display: block;
		margin: 0 0 26px 0;
	}

	.nav a {
		color: #d46170;
		width: 256px;
		font-size: 12px;
		display: block;
		text-align: right;
		margin: 0 auto;
		margin-bottom: 38px;
	}
</style>
